<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <div class="h_top">
          <div class="bread_title">
            <span>更新点检计划</span>
          </div>
          <div class="save_button">
            <div class="buttonBox">
              <el-button type="primary" icon="el-icon-back" size="mini" @click="goBack">返回</el-button>
            </div>
            <div class="buttonBox">
              <el-button type="primary" icon="el-icon-document-checked" size="mini" @click="save">保存</el-button>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div>
      <el-row>
        <el-col :span="24">
          <el-form ref="form" :model="data" :inline="true" :rules="formRules">
            <el-input v-model="data.id" type="hidden" />
            <el-row :gutter="10">
              <el-col :span="4">
                <el-form-item prop="coding">
                  <div>编号</div>
                  <el-input v-model="data.coding" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="name">
                  <div>名称</div>
                  <el-input v-model="data.name" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="type">
                  <div>类型</div>
                  <el-select v-model="data.type" size="mini">
                    <el-option v-for="(item, index) in groupType" :key="index" :value="index" :label="item" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="unit">
                  <div>单位</div>
                  <el-select v-model="data.unit" size="mini">
                    <el-option v-for="(item,index) in planType" :key="index" :label="item" :value="index" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="equipment_id">
                  <div>资产</div>
                  <v-select-s v-model="data.equipment_id" action="eqList" :query="{type:data.type,unit:data.unit,add_field: 'coding'}" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="priority">
                  <div>优先程度</div>
                  <el-select v-model="data.priority" size="mini">
                    <el-option v-for="(item,index) in priority" :key="index" :label="item" :value="index" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="profession">
                  <div>专业</div>
                  <el-select v-model="data.profession" size="mini">
                    <el-option v-for="(item,index) in profession" :key="index" :label="item" :value="index" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="period">
                  <div>周期</div>
                  <el-input v-model="data.period" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="cost_id">
                  <div>成本中心</div>
                  <v-select v-model="data.cost_id" action="costList" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="admin_id">
                  <div>负责人</div>
                  <v-select-s v-model="data.admin_id" action="adminList" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="execute_date">
                  <div>执行时间</div>
                  <el-date-picker v-model="data.execute_date" type="datetime" align="right" value-format="yyyy-MM-dd HH:mm:ss" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="status">
                  <div>状态</div>
                  <el-select v-model="data.status" size="mini">
                    <el-option v-for="(item,index) in commonStatus" :key="index" :label="item" :value="index" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item>
                  <div>下一个日期</div>
                  <el-date-picker v-model="data.next_date" type="datetime" align="right" value-format="yyyy-MM-dd HH:mm:ss" size="mini" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="ready">
                  <div>准备（天数）</div>
                  <el-input v-model="data.ready" size="mini" />
                </el-form-item>
              </el-col>
              <div v-if="data.verify_admin">
                <el-col :span="4">
                  <el-form-item>
                    <div>验证人员</div>
                    <el-input v-model="data.verify_admin.name" :disabled="true" size="mini" />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item>
                    <div>验证时间</div>
                    <el-date-picker v-model="data.verify_date" type="date" :disabled="true" size="mini" />
                  </el-form-item>
                </el-col>
              </div>
              <el-col :span="4" hidden>
                <el-form-item prop="is_send">
                  <div>是否发送给负责人</div>
                  <el-select v-model="data.is_send" size="mini">
                    <el-option v-for="(item,index) in planSend" :key="index" :label="item" :value="index" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4" hidden>
                <el-form-item prop="bz_check">
                  <div>是否班长审核</div>
                  <el-select v-model="data.bz_check" size="mini">
                    <el-option v-for="(item,index) in planSend" :key="index" :label="item" :value="index" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4" hidden>
                <el-form-item prop="engineer_check">
                  <div>是否工程师审核</div>
                  <el-select v-model="data.engineer_check" size="mini">
                    <el-option v-for="(item,index) in planSend" :key="index" :label="item" :value="index" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="sort">
                  <div>排序</div>
                  <el-input v-model="data.sort" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="task_long">
                  <div>任务时长（小时）</div>
                  <el-input v-model="data.task_long" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="workshop">
                  <div>车间</div>
                  <el-select v-model="data.workshop" size="mini">
                    <el-option v-for="(item,index) in planWorkshop" :key="index" :label="item" :value="index" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item>
                  <div>计划类别</div>
                  <el-select v-model="data.category" size="mini" disabled>
                    <el-option v-for="(item,index) in planCategory" :key="index" :label="item" :value="index" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-tabs>
            <el-tab-pane>
              <span slot="label">
                任务
                <el-badge class="mark" :value="taskTotal" />
              </span>
              <template>
                <el-table :data="taskList">
                  <el-table-column label="任务" min-width="29%" prop="task.name" />
                  <el-table-column label="参数" min-width="29%" prop="param.name" />
                  <el-table-column label="参数标准" min-width="34%" prop="param.standard" />
                  <el-table-column label="操作" min-width="8%">
                    <template scope="scope">
                      <el-button type="text" size="small" @click="removeTask(scope.row.id)">删除</el-button>
                    </template>
                  </el-table-column>
                  <div slot="append">
                    <el-form ref="append_task" :model="taskData" inline class="hf_form append_other_admin" :rules="append_task">
                      <el-input v-model="data.id" type="hidden" />
                      <el-row :gutter="10">
                        <el-col :span="7">
                          <el-form-item prop="task_id">
                            <v-select-s v-model="taskData.task_id" action="taskList" :query="{add_field: 'coding'}" />
                          </el-form-item>
                        </el-col>
                        <el-col :span="15">
                          <el-form-item prop="param_id">
                            <v-select-s v-model="taskData.param_id" action="paramList" :query="{add_field: 'standard'}" />
                          </el-form-item>
                        </el-col>
                        <el-col :span="2">
                          <el-form-item>
                            <el-button icon="el-icon-upload2" size="mini" @click="appendTask" />
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </el-form>
                    <!--<el-button>取消全选</el-button>-->
                    <!--<el-button>全选二维码</el-button>-->
                    <!--<el-button>全选Rfid</el-button>-->
                    <!--<el-button>全选NFC</el-button>-->
                  </div>
                </el-table>
                <el-row style="margin: 10px 0;">
                  <el-button>选择任务组</el-button>
                </el-row>
                <el-row :gutter="10">
                  <el-form ref="append_taskGroup" :model="taskGroupData" inline class="hf_form append_other_admin" :rules="append_taskGroup">
                    <el-col :span="7">
                      <el-form-item prop="task_group_id">
                        <v-select v-model="taskGroupData.task_group_id" action="taskGroupList" :query="{'status': 0, 'add_field': 'coding'}" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="2">
                      <el-form-item>
                        <el-button icon="el-icon-upload2" size="mini" @click="appendTaskGroup" />
                      </el-form-item>
                    </el-col>
                  </el-form>
                </el-row>
              </template>
            </el-tab-pane>
            <el-tab-pane label="描述">
              <el-row :gutter="10">
                <el-col :span="4">
                  <div>
                    <span>创建时间日期</span>
                    <el-input v-model="data.create_time" placeholder="创建时间日期" class="mtb10" :disabled="true" size="mini" />
                  </div>
                  <div>
                    <span>创建人</span>
                    <el-input v-model="data.cr_admin.name" placeholder="创建人" class="mtb10" :disabled="true" size="mini" />
                  </div>
                  <div v-if="data.update_time">
                    <div>
                      <span>最近更新</span>
                      <el-input v-model="data.update_time" placeholder="最近更新" class="mtb10" :disabled="true" size="mini" />
                    </div>
                    <div>
                      <span>更新者</span>
                      <el-input v-model="data.up_admin.name" placeholder="更新者" class="mtb10" :disabled="true" size="mini" />
                    </div>
                    <div>
                      <span>上次执行</span>
                      <el-input v-model="data.prev_execute" placeholder="更新者" class="mtb10" :disabled="true" size="mini" />
                    </div>
                  </div>
                </el-col>
                <el-col :span="20">
                  <Tinymce id="content" v-model="data.content" />
                </el-col>
              </el-row>
            </el-tab-pane>
            <!--
            <el-tab-pane>
              <span slot="label">
                备件
                <el-badge class="mark" :value="partsTotal" />
              </span>
              <template>
                <el-row>
                  <el-col :span="24">
                    <el-table :data="partsList">
                      <el-table-column label="备品备件" min-width="50%" prop="parts.name" />
                      <el-table-column label="计划数量" min-width="52%" prop="number" />
                      <el-table-column label="操作" min-width="8%">
                        <template scope="scope">
                          <el-button type="text" size="small" @click="removeParts(scope.row.id)">删除</el-button>
                        </template>
                      </el-table-column>
                      <div slot="append">
                        <el-form ref="append_parts" :model="partsData" inline class="hf_form append_other_admin" :rules="append_parts">
                          <el-row :gutter="10">
                            <el-col :span="11">
                              <el-form-item prop="part_id">
                                <v-select-s v-model="partsData.part_id" action="partsList" :query="{add_field:'spec'}" />
                              </el-form-item>
                            </el-col>
                            <el-col :span="11">
                              <el-form-item prop="number">
                                <el-input v-model="partsData.number" size="mini" />
                              </el-form-item>
                            </el-col>
                            <el-col :span="2">
                              <el-form-item>
                                <el-button icon="el-icon-upload2" size="mini" @click="appendParts" />
                              </el-form-item>
                            </el-col>
                          </el-row>
                        </el-form>
                      </div>
                    </el-table>
                  </el-col>
                </el-row>
              </template>
            </el-tab-pane>
            -->
            <el-tab-pane label="员工">
              <span slot="label">
                员工
                <el-badge class="mark" :value="staffTotal" />
              </span>
              <template>
                <el-row>
                  <el-col :span="24">
                    <el-table :data="staffList">
                      <el-table-column label="专业" prop="profession" min-width="24%" :formatter="professionFormat" />
                      <el-table-column label="计划的工时" prop="hours" min-width="34%" />
                      <el-table-column label="偏好的员工" prop="admin.name" min-width="34%" />
                      <el-table-column label="操作" min-width="8%">
                        <template scope="scope">
                          <el-button type="text" size="small" @click="removeStaff(scope.row.id)">删除</el-button>
                        </template>
                      </el-table-column>
                      <div slot="append">
                        <el-form ref="append_staff" :model="staffData" inline class="hf_form append_other_admin" :rules="append_staff">
                          <el-row :gutter="10">
                            <el-col :span="6">
                              <el-form-item prop="profession">
                                <el-select v-model="staffData.profession" size="mini">
                                  <el-option v-for="(item, index) in profession" :key="index" :value="index" :label="item" />
                                </el-select>
                              </el-form-item>
                            </el-col>
                            <el-col :span="8">
                              <el-form-item prop="hours">
                                <el-input v-model="staffData.hours" size="mini" />
                              </el-form-item>
                            </el-col>
                            <el-col :span="8">
                              <el-form-item prop="admin_id">
                                <v-select-s v-model="staffData.admin_id" />
                              </el-form-item>
                            </el-col>
                            <el-col :span="2">
                              <el-form-item>
                                <el-button icon="el-icon-upload2" size="mini" @click="appendStaff" />
                              </el-form-item>
                            </el-col>
                          </el-row>
                        </el-form>
                      </div>
                    </el-table>
                  </el-col>
                </el-row>
              </template>
            </el-tab-pane>
            <!--<el-tab-pane label="基于状态的维护">-->
            <!--  <plan-status />-->
            <!--</el-tab-pane>-->
            <!--<el-tab-pane label="多时段维护"></el-tab-pane>-->
            <!--<el-tab-pane label="其他周期维护">-->
            <!--  <plan-period></plan-period>-->
            <!--</el-tab-pane>-->
            <!--<el-tab-pane label="工单">-->
            <!--  <plan-wordorder></plan-wordorder>-->
            <!--</el-tab-pane>-->
          </el-tabs>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import API from '@/api/project/plan'
import components from '@/components/project/plan/index'
import Tinymce from '@/components/Tinymce/index'
import VSelect from '@/components/select'
import VSelectS from '@/components/select-search'
import { profession, priority, commonStatus, planType, groupType, planSend, planCategory, planWorkshop } from '@/utils/options'
export default {
  inject: ['backUrl', 'delOne', 'update', 'formatDate', 'goUrl'],
  components: {
    Tinymce,
    VSelect,
    VSelectS,
    ...components
  },
  data() {
    return {
      data: {
        'cr_admin': {
          'name': ''
        },
        'next_date': ''
      },
      profession,
      priority,
      commonStatus,
      planType,
      groupType,
      planSend,
      planCategory,
      planWorkshop,
      taskTotal: 0,
      staffTotal: 0,
      partsTotal: 0,
      list: [],
      staffList: [],
      staffData: {},
      partsList: [],
      partsData: {},
      taskList: [],
      taskData: {},
      taskGroupData: {},
      formRules: {
        coding: [
          {
            required: true,
            message: '请输入编号',
            trigger: 'blur'
          }
        ],
        name: [
          {
            required: true,
            message: '请输入名称',
            trigger: 'blur'
          }
        ],
        unit: [
          {
            required: true,
            message: '请输入单位',
            trigger: 'blur'
          }
        ],
        equipment_id: [
          {
            required: true,
            message: '请选择资产',
            trigger: 'change'
          }
        ],
        priority: [
          {
            required: true,
            message: '请选择优先程度',
            trigger: 'change'
          }
        ],
        profession: [
          {
            required: true,
            message: '请选择专业',
            trigger: 'change'
          }
        ],
        execute_date: [
          {
            required: true,
            message: '请输入执行时间',
            trigger: 'blur'
          }
        ],
        period: [
          {
            required: true,
            message: '请输入周期',
            trigger: 'blur'
          }
        ],
        cost_id: [
          {
            required: true,
            message: '请选择成本中心',
            trigger: 'change'
          }
        ],
        admin_id: [
          {
            required: true,
            message: '请选择维护负责人',
            trigger: 'change'
          }
        ],
        type: [
          {
            required: true,
            message: '请选择类型',
            trigger: 'change'
          }
        ],
        status: [
          {
            required: true,
            message: '请选择状态',
            trigger: 'change'
          }
        ],
        ready: [
          {
            required: true,
            message: '请填写准备（天数）',
            trigger: 'blur'
          }
        ],
        task_long: [
          {
            required: true,
            message: '请输入任务时长',
            trigger: 'blur'
          }
        ],
        workshop: [
          {
            required: true,
            message: '请选择车间',
            trigger: 'change'
          }
        ],
        sort: [
          {
            required: true,
            message: '请输入排序',
            trigger: 'blur'
          }
        ]
      },
      append_staff: {
        profession: [
          {
            required: true,
            message: '请选择专业',
            trigger: 'change'
          }
        ],
        hours: [
          {
            required: true,
            message: '请填写工时',
            trigger: 'blur'
          }
        ],
        admin_id: [
          {
            required: true,
            message: '请选择员工',
            trigger: 'change'
          }
        ]
      },
      append_task: {
        task_id: [
          {
            required: true,
            message: '请选择任务',
            trigger: 'change'
          }
        ],
        param_id: [
          {
            required: true,
            message: '请选择参数',
            trigger: 'change'
          }
        ]
      },
      append_taskGroup: {
        task_group_id: [
          {
            required: true,
            message: '请选择任务组',
            trigger: 'change'
          }
        ]
      },
      append_parts: {
        part_id: [
          {
            required: true,
            message: '请选择备件',
            trigger: 'change'
          }
        ],
        number: [
          {
            required: true,
            message: '请填写数量',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    const id = this.$route.params.id
    API.getOne(id).then(response => {
      if (response.error_code === 62404) {
        this.$alert('您请求的维护计划不存在', '错误', {
          confirmButtonText: '确定',
          callback: () => {
            this.backUrl()
          }
        })
      }
      this.data = response.data
      this.staffList = response.data.other_member
      this.partsList = response.data.other_parts
      this.taskList = response.data.other_task

      this.staffTotal = response.data.other_member.length
      this.partsTotal = response.data.other_parts.length
      this.taskTotal = response.data.other_task.length
      const execute_date = response.data.execute_date
      const period = response.data.period
      const next_date = new Date(execute_date).getTime() + period * 24 * 3600 * 1000
      this.data.next_date = this.formatDate(next_date)
    })
  },
  methods: {
    professionFormat(row) {
      if (row.profession === 0) {
        return '所有'
      } else if (row.profession === 1) {
        return 'ELE - 电气'
      } else if (row.profession === 2) {
        return 'MEC - 机械'
      }
    },
    confirmDel() {
      const id = this.data.id
      this.delOne(API, id, true)
    },
    save() {
      const thisData = this.data
      const thisForm = this.$refs.form
      this.update(API, thisData, thisForm)
    },
    appendStaff() {
      this.$refs.append_staff.validate((valid) => {
        if (valid) {
          const profession = this.staffData.profession
          const hours = this.staffData.hours
          const admin_id = this.staffData.admin_id
          const admin_data = {
            'profession': profession,
            'hours': hours,
            'admin_id': admin_id,
            'plan_id': this.$route.params.id
          }
          API.appendMember(admin_data).then(response => {
            if (response.data.error_code === 1) {
              this.$message({
                message: '恭喜你，更新成功',
                type: 'success'
              })
              API.getOne(this.$route.params.id).then(response => {
                this.staffList = response.data.other_member
                this.staffTotal = response.data.other_member.length
              })
            } else if (response.data.error_code === 62004) {
              this.$message.error('该人员已存在')
            } else {
              this.$message.error(response.data.message)
            }
          })
        }
      })
    },
    removeStaff(id) {
      const admin_data = {
        'id': id
      }
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        API.removeMember(admin_data).then((response) => {
          if (response.data.error_code === 1) {
            this.$message({
              message: '恭喜你，删除成功',
              type: 'success'
            })
            API.getOne(this.$route.params.id).then(response => {
              this.staffList = response.data.other_member
              this.staffTotal = response.data.other_member.length
            })
          } else {
            this.$message.error(response.data.message)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    appendParts() {
      this.$refs.append_parts.validate((valid) => {
        if (valid) {
          const part_id = this.partsData.part_id
          const number = this.partsData.number
          const parts_data = {
            'part_id': part_id,
            'number': number,
            'plan_id': this.$route.params.id
          }
          API.appendParts(parts_data).then(response => {
            if (response.data.error_code === 1) {
              this.$message({
                message: '恭喜你，更新成功',
                type: 'success'
              })
              API.getOne(this.$route.params.id).then(response => {
                this.partsList = response.data.other_parts
                this.partsTotal = response.data.other_parts.length
              })
            } else if (response.data.error_code === 62004) {
              this.$message.error('该备件已存在')
            } else {
              this.$message.error(response.data.message)
            }
          })
        }
      })
    },
    removeParts(id) {
      const parts_data = {
        'id': id
      }
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        API.removeParts(parts_data).then((response) => {
          if (response.data.error_code === 1) {
            this.$message({
              message: '恭喜你，删除成功',
              type: 'success'
            })
            API.getOne(this.$route.params.id).then(response => {
              this.partsList = response.data.other_parts
              this.partsTotal = response.data.other_parts.length
            })
          } else {
            this.$message.error(response.data.message)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    appendTask() {
      this.$refs.append_task.validate((valid) => {
        if (valid) {
          const task_id = this.taskData.task_id
          const param_id = this.taskData.param_id
          const detail = this.taskData.detail
          const task_data = {
            'task_id': task_id,
            'param_id': param_id,
            'detail': detail,
            'plan_id': this.$route.params.id
          }
          API.appendTask(task_data).then(response => {
            if (response.data.error_code === 1) {
              this.$message({
                message: '恭喜你，更新成功',
                type: 'success'
              })
              API.getOne(this.$route.params.id).then(response => {
                this.taskList = response.data.other_task
                this.taskTotal = response.data.other_task.length
              })
            } else if (response.data.error_code === 62004) {
              this.$message.error('该任务已存在')
            } else {
              this.$message.error(response.data.message)
            }
          })
        }
      })
    },
    removeTask(id) {
      const task_data = {
        'id': id
      }
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        API.removeTask(task_data).then((response) => {
          if (response.data.error_code === 1) {
            this.$message({
              message: '恭喜你，删除成功',
              type: 'success'
            })
            API.getOne(this.$route.params.id).then(response => {
              this.taskList = response.data.other_task
              this.taskTotal = response.data.other_task.length
            })
          } else {
            this.$message.error(response.data.message)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    appendTaskGroup() {
      this.$refs.append_taskGroup.validate((valid) => {
        if (valid) {
          const task_group = this.taskGroupData.task_group_id
          const task_data = {
            'task_group': task_group,
            'plan_id': this.$route.params.id
          }
          API.appendTaskGroup(task_data).then(response => {
            if (response.data.error_code === 1) {
              this.$message({
                message: '恭喜你，更新成功',
                type: 'success'
              })
              API.getOne(this.$route.params.id).then(response => {
                this.taskList = response.data.other_task
                this.taskTotal = response.data.other_task.length
              })
            } else {
              this.$message.error(response.data.message)
            }
          })
        }
      })
    },
    goBack() {
      this.goUrl('/project/plan1')
    }
  }
}
</script>

<style scoped>
.table tr th {
  text-align: right;
}
</style>
